<template>
  <page-layout :title="query.name">
    <a-layout style="`min-height: ${minHeight}px`">
      <a-layout-sider
        width="27%"
        style="background-color: unset; margin-left: -24px"
      >
        <a-card title="工程规划清单" class="custom-card">
          <a slot="extra" href="#">
            <a-form>
              <a-input-search
                placeholder="请输入"
                style="width: 206px"
                @search="onSearch"
              />
            </a-form>
          </a>
        </a-card>
        <a-list
          item-layout="horizontal"
          :data-source="cardData"
          :grid="{ gutter: 16 }"
          style="margin-top: 8px"
        >
          <a-list-item slot="renderItem" slot-scope="item">
            <architect-card
              :projectNo="item.projectNo"
              :title="item.title"
              :projectCnt="item.projectCnt"
            >
              Card content
            </architect-card>
          </a-list-item>
        </a-list>
      </a-layout-sider>
      <a-layout-content style="background: #fff; margin-right: -24px">
        <!-- 操作表单 -->
        <a-tabs
          default-active-key="1"
          @change="callback"
          style="min-height: calc(100vh - 165px)"
        >
          <a-tab-pane key="1" tab="规划任务">
            <a-form
              style="margin: 14px 0"
              layout="inline"
              :form="form"
              @submit="handleSubmit"
            >
              <a-row>
                <a-col>
                  <a-form-item style="margin-left: 16px">
                    <a-config-provider :auto-insert-space-in-button="false">
                      <a-button type="primary" @click="showAddModal">
                        新增
                      </a-button>
                    </a-config-provider>
                    <my-modal
                      :visible="modalVisible"
                      :width="1100"
                      :title="'新增'"
                      @update:visible="modalVisible = $event"
                    >
                      <a-form :colon="false">
                        <a-row :gutter="24">
                          <a-col :span="12">
                            <a-form-item
                              label="规划任务编号"
                              label-align="center"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                              required
                            >
                              <a-input placeholder="请输入" />
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="规划任务名称"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                              required
                            >
                              <a-input placeholder="请输入" />
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="风险处理人"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                              required
                            >
                              <!-- 需要调接口获取对应处理人列表，用mock模拟 -->
                              <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  Option 1
                                </a-select-option>
                                <a-select-option value="2">
                                  Option 2
                                </a-select-option>
                                <a-select-option value="3">
                                  Option 3
                                </a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="计划解决时间"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                              required
                            >
                              <a-date-picker style="width: 100%" />
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="版本"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                            >
                              <!-- 需要调接口获取对应处理人列表，用mock模拟 -->
                              <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  Option 1
                                </a-select-option>
                                <a-select-option value="2">
                                  Option 2
                                </a-select-option>
                                <a-select-option value="3">
                                  Option 3
                                </a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="需求项"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                            >
                              <!-- 需要调接口获取对应处理人列表，用mock模拟 -->
                              <a-select placeholder="请选择">
                                <a-select-option value="1">
                                  Option 1
                                </a-select-option>
                                <a-select-option value="2">
                                  Option 2
                                </a-select-option>
                                <a-select-option value="3">
                                  Option 3
                                </a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :span="12">
                            <a-form-item
                              label="风险类型"
                              :labelCol="{ span: 5 }"
                              :wrapperCol="{ span: 17 }"
                              required
                            >
                              <!-- 需要调接口获取对应处理人列表，用mock模拟 -->
                              <a-select placeholder="请选择">
                                <a-select-option
                                  v-for="option in typeOptions"
                                  :key="option.value"
                                  :value="option.value"
                                >
                                  {{ option.label }}
                                </a-select-option>
                              </a-select>
                            </a-form-item>
                          </a-col>
                          <a-col :span="24">
                            <a-form-item
                              label="风险描述"
                              :labelCol="{ span: 2 }"
                              :wrapperCol="{ span: 21 }"
                              required
                            >
                              <a-textarea
                                placeholder="请输入"
                                allow-clear
                                :rows="4"
                                @change="onDescChange"
                              />
                            </a-form-item>
                          </a-col>
                          <a-col :span="24">
                            <a-form-item
                              label="风险决策"
                              :labelCol="{ span: 2 }"
                              :wrapperCol="{ span: 21 }"
                              required
                            >
                              <a-textarea
                                placeholder="请输入"
                                allow-clear
                                :rows="4"
                                @change="onDescChange"
                              />
                            </a-form-item>
                          </a-col>
                        </a-row>
                      </a-form>
                    </my-modal>
                  </a-form-item>
                  <a-form-item> <a-button>风险报送</a-button> </a-form-item>
                  <a-form-item> <a-button>延期申请</a-button> </a-form-item>
                  <a-form-item> <a-button>转换需求项</a-button> </a-form-item>
                  <a-form-item>
                    <a-button @click="multiEdit">批量编辑</a-button>
                  </a-form-item>
                  <a-form-item>
                    <a-config-provider :auto-insert-space-in-button="false">
                      <a-button>导入</a-button>
                    </a-config-provider>
                  </a-form-item>
                  <a-form-item>
                    <a-config-provider :auto-insert-space-in-button="false">
                      <a-button>导出</a-button>
                    </a-config-provider>
                  </a-form-item>
                  <a-form-item>
                    <a-config-provider :auto-insert-space-in-button="false">
                      <a-button>作废</a-button>
                    </a-config-provider>
                  </a-form-item>
                  <div style="float: right">
                    <a-form-item>
                      <a-input-search
                        placeholder="请输入"
                        style="width: 206px"
                        @search="onSearch"
                      />
                    </a-form-item>
                    <a-form-item>
                      <a-select
                        default-value="筛选"
                        style="width: 72px"
                        @change="handleChange"
                      >
                        <a-select-option value="1"> 筛选 </a-select-option>
                      </a-select>
                    </a-form-item>
                  </div>
                </a-col>
              </a-row>
            </a-form>
            <standard-table
              :infoShow="false"
              :size="size"
              :bordered="true"
              :columns="columns"
              :dataSource="dataSource"
              :selectedRows.sync="selectedRows"
              @clear="onClear"
              @change="onChange"
              :pagination="false"
              :scroll="{ x: true, y: minHeight }"
              @selectedRowChange="onSelectChange"
            />
          </a-tab-pane>
          <a-tab-pane key="2" tab="待办处理" force-render>
            <a-skeleton />
          </a-tab-pane>
          <a-tab-pane key="3" tab="风险"> <a-skeleton /> </a-tab-pane>
          <a-tab-pane key="4" tab="规划详情">
            <a-skeleton />
          </a-tab-pane>
          <div slot="tabBarExtraContent" class="tab-extra-content">
            <img src="../..//assets/svg/牵头人@1.5x.svg" />
            <div class="label">牵头人</div>
            谢萌萌
            <img src="../..//assets/svg/创建人@1.5x.svg" />
            <div class="label">创建人</div>
            李四
            <img src="../..//assets/svg/状态@1.5x.svg" />
            <div class="label">状态</div>
            进行中
            <div style="margin-right: 16px" />
          </div>
        </a-tabs>
      </a-layout-content>
    </a-layout>
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import StandardTable from "@/components/table/StandardTable";
import { request } from "@/utils/request";
import { mapState } from "vuex";
import MyModal from "../../components/modal/MyModal";
import ArchitectCard from "../../components/card/ArchitectCard";
import { architectColumns, cardData, typeOptions } from "../../pages/projectManagement/index";

const minHeight = window.innerHeight - 350;
export default {
  name: "Architect",
  components: {
    PageLayout,
    StandardTable,
    MyModal,
    ArchitectCard,
  },
  data() {
    return {
      cardData,
      columns: architectColumns,
      dataSource: [],
      selectedRows: [],
      // pagination: {
      //   current: 1,
      //   pageSize: 10,
      //   total: 0,
      // },
      modalVisible: false,
      query: this.$route.query,
      typeOptions: typeOptions,
      minHeight,
      size: "middle",
    };
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {
      name: "customized_form_controls",
    });
  },
  mounted() {
    this.getData();
  },
  methods: {
    multiEdit() {
      this.$router.push("/architect/multi-edit");
    },
    onSearch(value) {
      console.log(value);
    },
    callback(key) {
      console.log(key);
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    handleChange() {
      console.log("change");
    },
    // onPageChange(page, pageSize) {
    //   this.pagination.current = page;
    //   this.pagination.pageSize = pageSize;
    //   this.getData();
    // },
    onClear() {
      this.$message.info("您清空了勾选的所有行");
    },
    onStatusTitleClick() {
      this.$message.info("你点击了状态栏表头");
    },
    onChange() {
      this.$message.info("表格状态改变了");
    },
    onSelectChange() {
      this.$message.info("选中行改变了");
    },
    getData() {
      request(
        process.env.VUE_APP_API_BASE_URL + "/planList",
        "get"
        // {
        //   page: this.pagination.current,
        //   pageSize: this.pagination.pageSize,
        // }
      ).then((res) => {
        const {
          list,
          // page, pageSize, total
        } = res?.data?.data ?? {};

        this.dataSource = list;
        // this.pagination.current = page;
        // this.pagination.pageSize = pageSize;
        // this.pagination.total = total;
      });
    },
    showAddModal() {
      this.modalVisible = true;
    },
    onDescChange() {
      console.log("description change");
    },
  },
};
</script>
<style scoped lang="less">
::v-deep .page-content {
  padding: 0;
}

// 页头样式
::v-deep .page-header {
  padding: 0px 24px;
  .page-header-wide {
    .breadcrumb {
      margin-bottom: 0px;
    }
    .detail .main .title {
      margin: 12px 0;
      font-size: 18px;
      font-weight: 700;
    }
  }
}

// 规划清单样式
::v-deep .custom-card .ant-card-head {
  height: 52px;
  padding: 0 8px 0 16px;
  font-size: 18px;
  font-weight: 700;
  .ant-card-head-wrapper {
    height: 52px;
  }
}

// tab 右上侧状态内容
.tab-extra-content {
  display: flex;
  align-items: center;
  color: #1f2329;
  img {
    height: 28px;
    width: 28px;
    margin: 0 10px 0px 24px;
  }
  .label {
    color: #646a73;
    margin-right: 9px;
  }
}

::v-deep .ant-tabs-bar {
  margin-bottom: 0px;
  .ant-tabs-tab {
    font-size: 16px;
    width: 88px;
    height: 52px;
    margin-right: 16px;
    text-align: center;
  }
  .ant-tabs-tab-active {
    font-weight: 700;
  }
}

// table
.ant-table-body {
  scrollbar-color: auto;
  scrollbar-width: auto;
}
</style>
